{% extends 'base.html' %}
{% block title%} SemRate - {{product.name}} {% endblock %}

{% block content %}

<script type="text/javascript">
$.ajaxSetup({async:false});

function createParameter() {
  //$('parameterform').serialize()
  data = $("#parameterform").serialize();
  alert(data);
  debug('test');
  $.post("/ajax_createparameter", data, function(data) { debug(data); } );
}


//http://stackoverflow.com/questions/6179215/jquery-determine-name-id-of-form-on-submit
function submit_tag(e) {
  debug('#'+e.target.id);  
  var form = $('#'+e.target.id);
  var s = form.serialize();
  var success = false;
  var result = $.post("/ajax_createtag", s, function(data) { if (data == "success") {success = true; }} );
  //alert(dir(result));
  if (!success){
	alert("You have already given this tag.");
	return false;
  }
  taglist = '#'+e.target.id.substr(0,e.target.id.length)

  var formDict = formToDict(form);

  s = form.attr('id')
  name = s.substr(0,s.length-4); // + '_taglist_neg';
  charge = s.substr(s.length-3, s.length); // + '_taglist_neg';

  var val = formDict.tagtext;
  $('#'+name+'_taglist_' + charge).append(" <span class='tag_"+charge+"'>" + val + "</span>");

  //http://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery
  $(':input',form).not(':button, :submit, :reset, :hidden').val('');
  window.location.reload();

  return false;
}

function localinit() {
  //$('.negative_input').keypress(addTag);
  $('.no_submit').submit(submit_tag);
  debug('localinit');
}

function toggleCurtain(name) {
  //$('#'+name+'_summary_curtain').css('background-color','red');
  $('#'+name+'_summary_curtain').toggle();
}

function toggleAddParameter() {
  $('#addParameterDiv').toggle();
};

$(localinit);
</script>
<br/>
<table style='width: 700px;'> 
  <tr>
  <td style='width: 550px; vertical-align: top;'>
  <h2 style='margin-bottom: 8px;' >{{ product.name }}</h2>
  <h4 style='margin-top: 0px;'> {{product.category}} </h4>
<table style='width: 550px;'>
<tr>
<td>
  <a class='discrete_button' style='font-size: 9pt;' href="/category{{product.category.slug}}"> [See other products in same category] </a> <br/>
</td>
<td style='text-align: center;'>
  <div id='rating'>
  Rating
  <div id='rating_inside'>
  {{ overall_score }}
  </div>
  </div>
</td>
</tr>
</table>

  </td>
  <td>
  <img src='http://img.freebase.com/api/trans/image_thumb{{product.imgslug}}?maxheight=150&mode=fit&maxwidth=150'/><br/>
  </td>
  </tr>
</table>




<p>
Rating is done on a 0 to 5 scale, with 5 being best. 

<table class='summary_table'>
<tr>
  <th> </th>
  <td> Rating: </td>
  <td> Negative: </td>
  <td> Positive: </td>
</tr>
{% for param in parameters %}

<tr id='{{ param.slug_wo }}_summary_row'>
  <th class='st_bar'> 
    {{ param.name }} <br/>
	{% if user.is_authenticated %}
	  <a class='tinybtn' href="javascript:toggleCurtain('{{ param.slug_wo }}');"> [Rate!] </a> 
	{% else %}
	{% endif %}
  </th>
  <td class='st_bar' id='{{ param.slug }}_score'> {{ param.get_score }} <span style='font-size: 8pt;'>(by {{ param.score_count}})</span> </td>
  <td  id='{{param.slug_wo}}_taglist_neg' class='st_bar'> {% for tag in param.get_tags_neg %} <span class='tag_neg'>{{tag.tagtext}} {% if tag.tagtext__count != 1 %} ({{tag.tagtext__count}}){% endif %}</span> {% endfor %} </td>
  <td  id='{{param.slug_wo}}_taglist_pos' class='st_bar'> {% for tag in param.get_tags_pos %} <span class='tag_pos'>{{tag.tagtext}} {% if tag.tagtext__count != 1 %} ({{tag.tagtext__count}}){% endif %}</span> {% endfor %} </td>
</tr>
<tr style='display: none;' id='{{ param.slug_wo }}_summary_curtain' class='summary_curtain'>
  <th class='st_curtain'>  </th>
  <td class='st_curtain'>
    <form id='{{param.slug_wo}}_rate' action='/rate_parameter'>
	  <input type="hidden" name='parameter_id' value='{{param.id}}'/>
      <select class='scoreselect' name='score'>
        <option value='none' selected='selected'>---</option>
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
        <option value='5'>5</option>
      </select>
      <input class='scoresubmit' type='submit' value='Ok' name='submit'>
    </form>
  </td>
  <td class='st_curtain' style='white-space: nowrap;'>
        <form id='{{param.slug_wo}}_neg' class='no_submit'> <!--2'  action="/ajax_createtag" method="post">-->
          {% csrf_token %}
          {{ tagform.tagtext }}
          <input type='hidden' id='id_parameter' name='parameter' value='{{param.id}}'/>
          <input type='hidden' id='id_charge' name='charge' value='-1'/>
          <input class='tagsubmit' type='submit' value='+' name='submit'/>
          
        </form>
  </td>
  <td class='st_curtain' style='white-space: nowrap;'>
        <form id='{{param.slug_wo}}_pos' class='no_submit'>
          {% csrf_token %}
          {{ tagform.tagtext }}
          <input type='hidden' id='id_parameter' name='parameter' value='{{param.id}}'/>
          <input type='hidden' id='id_charge' name='charge' value='1'/>
          <input class='tagsubmit' type='submit' value='+' name='submit'>
        </form>
  </td>
</tr>
{% endfor %}
<tr>
  <th class='st_c1'> </th>
  <td class='st_c2'> </td>
  <td class='st_c3'> </td>
  <td class='st_c4'> </td>
</tr>
</table>

<br/>
<br/>

<div class="fb-comments" data-href="http://www.pythonkursu.com/products{{product.slug}}" data-num-posts="10" data-width="500" data-colorscheme="dark"></div>

<a class='tinybtn' href='javascript:toggleAddParameter();'>[add parameter]</a> 

<div id='addParameterDiv'>
<h2> Create a new Parameter </h2>
<form id='parameterform' action='/create_parameter' method='post'>
{% csrf_token %}
<p>Name:<br/>
{{ parameterform.name }}<br/>
<!-- <input name='category' type='hidden' value='{{product.category.id}}'/><br/> -->
<input name='productslug' type='hidden' value='{{product.slug}}'/><br/>

<!--<a href='javascript:createParameter()' class='btn'> Submit </a>-->
<input type="submit" value="Create"/>
</p>
</form>
</div>

<br/><br/>
<a class='discrete_link' style='font-size: 8pt;' href="/rdf{{product.slug}}">[RDF]</a>


<table id='last_activity_table' style='margin: auto;'>
<tr>
<td style='width: 150px;'> Creator: </td>
<td style='width: 150px;'> Last activity: </td>
</tr>
<tr>
<td> <img style='width:105px; height: 70px;' src='/site_media/{{product.creator.user.username}}.jpg'> </td>
<td> <img style='width:105px; height: 70px;'  src='/site_media/{{product.last_activity.user.username}}.jpg'> </td>
</tr>

<tr>
<td> <a href='/user/{{product.creator}}'>{{product.creator}} </a></td>
<td> <a href='/user/{{product.last_activity}}'>{{product.last_activity }} </a></td>
</tr>
<tr>
<td> {{product.created_time }} </td>
<td> {{product.last_activity_time }} </td>
</tr>
</table>


{% endblock %}

